<!--
 @description  软体核心指标统计
 @fileName CoreData.vue
 @author maliang
 @created 2021/12/06 11:23:00
-->
<template>
  <div>
    <div class="core-box">
      <div v-for="(item, index) in sumList" :key="index" class="core-items">
        <div class="c-title">
          <img class="icon" :src="item.icon" alt="">
          <span>{{ item.title
          }}<span v-if="item.unit">({{ item.unit }})</span></span>
        </div>
        <div class="today">
          今日
          <span
            :class="item.colorClass"
          >{{ item.data.todayQuantity | filterForamtThousand }}(套)</span>
        </div>
        <div class="month">
          <span>昨日<span :class="item.colorClass">{{
            item.data.yesterdayQuantity | filterForamtThousand
          }}</span></span>
          <span>本月<span :class="item.colorClass">{{
            item.data.monthQuantity | filterForamtThousand
          }}</span></span>
        </div>
      </div>
    </div>
    <div class="core-box">
      <div v-for="(item, index) in coreList" :key="index" class="core-item">
        <div class="c-title">
          <img class="icon" :src="item.icon" alt="">
          <span>{{ item.title
          }}<span v-if="item.unit">({{ item.unit }})</span></span>
        </div>
        <div class="today" @click="showDialogHandle(item.title)">
          今日
          <div>
            <span
              :class="item.colorClass"
            >{{ item.data.todayQuantity | filterForamtThousand }}(套)</span>
            <span
              :class="item.colorClass"
            >{{ item.data.todayPackage | filterForamtThousand }}(包)</span>
          </div>
        </div>
        <div class="month" @click="showDialogHandle(item.title)">
          <span>昨日<span :class="item.colorClass">{{
            item.data.yesterdayQuantity | filterForamtThousand
          }}</span></span>
          <span>本月<span :class="item.colorClass">{{
            item.data.monthQuantity | filterForamtThousand
          }}</span></span>
        </div>
      </div>
    </div>
    <div class="core-update-time">统计截止时间: {{ showDate }}</div>
    <van-popup
      v-model="showDialog"
      round
      closeable
      class="custom-van-pop"
      style="width: 82%"
    >
      <software-dialog
        v-if="showDialog"
        :type-name="typeName"
        :core-date="coreDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import {
  getSoftwareQuantity,
  getSoftwarePackageQuantity
} from '@/apis/plankWood'
import SoftwareDialog from './SoftwareDialog'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'SoftwareCoreData',
  components: { SoftwareDialog },
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}.{m}.{d}')
    }
  },
  data() {
    return {
      showDialog: false,
      typeName: '',
      coreList: [
        {
          title: '套房（板式）',
          unit: '',
          icon: require('../../../assets/image/pro_type_banshi.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-yellow'
        },
        {
          title: '附柜（板式）',
          unit: '',
          icon: require('../../../assets/image/wood_fugui.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-blue'
        },
        {
          title: '自制',
          unit: '',
          icon: require('../../../assets/image/wood_zizhi.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-green'
        },
        {
          title: '套房（实木）',
          unit: '',
          icon: require('../../../assets/image/wood_shimu.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-yellow'
        },
        {
          title: '附柜（实木）',
          unit: '',
          icon: require('../../../assets/image/wood_fuguishimu.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-blue'
        },
        {
          title: '餐桌椅',
          unit: '',
          icon: require('../../../assets/image/wood_zhuoyi.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            todayPackage: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-green'
        }
      ],
      sumList: [
        {
          title: '板式汇总产量',
          unit: '',
          icon: require('../../../assets/image/wood_banshi.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-green'
        },
        {
          title: '实木汇总产量',
          unit: '',
          icon: require('../../../assets/image/wood-shimu.png'),
          data: {
            monthQuantity: '-',
            todayQuantity: '-',
            yesterdayQuantity: '-'
          },
          colorClass: 'color-green'
        }
      ]
    }
  },
  watch: {
    coreDate: {
      handler() {
        this.getCenterTargetData()
      },
      immediate: true
    }
  },
  methods: {
    showDialogHandle(name) {
      this.typeName = name
      this.showDialog = true
    },
    async getCenterTargetData() {
      // 核心指标
      const findSoftwareQuantity = getSoftwareQuantity(this.coreDate)
      try {
        const [softwareQuantityRes] = await Promise.all([findSoftwareQuantity])
        if (softwareQuantityRes.data && softwareQuantityRes.data.length) {
          softwareQuantityRes.data.forEach((item) => {
            this.dateSetHandle(item)
          })
        }
      } catch (error) {
        this.$toast.fail('系统异常')
      }

      // 核心指标包件
      const findSoftwarePackageQuantity = getSoftwarePackageQuantity(this.coreDate)
      try {
        const [softwarePackageQuantityRes] = await Promise.all([findSoftwarePackageQuantity])
        if (softwarePackageQuantityRes.data && softwarePackageQuantityRes.data.length) {
          softwarePackageQuantityRes.data.forEach((item) => {
            this.dateSetHandles(item)
          })
        }
      } catch (error) {
        this.$toast.fail('系统异常')
      }
    },
    dateSetHandle(item) {
      this.coreList.forEach((row) => {
        if (item.bigType === row.title) {
          row.data.monthQuantity = item.monthQuantity || 0
          row.data.todayQuantity = item.todayQuantity || 0
          row.data.todayPackage = item.todayPackage || 0
          row.data.yesterdayQuantity = item.yesterdayQuantity || 0
        }
      })
    },
    dateSetHandles(item) {
      this.sumList.forEach((row) => {
        if (item.typeName === row.title) {
          row.data.monthQuantity = item.monthQuantity || 0
          row.data.todayQuantity = item.todayQuantity || 0
          row.data.yesterdayQuantity = item.yesterdayQuantity || 0
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.core-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  &::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    background: #f5f6f7;
  }
  &::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: #f5f6f7;
  }
  .core-item {
    position: relative;
    width: 33.3333%;
    height: 108px;
    padding: 15px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f6f7;
    box-sizing: border-box;
    letter-spacing: 1px;
    color: #888;
    font-size: 12px;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15px;
      bottom: 15px;
      width: 1px;
      background: #f5f6f7;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    &.half_item {
      width: 50%;
    }
    &.no-br {
      &::after {
        display: none;
      }
    }
    .today {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      // line-height: 24px;
      margin-bottom: 10px;
      div {
        display: flex;
        flex-wrap: wrap;
        margin-left: 5px;
      }
      span {
        margin-left: 2px;
        // font-size: 20px;
        font-family: "PFZH";
      }
    }
    .month {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 16px;
      font-size: 10px;
      white-space: nowrap;
      letter-spacing: 0;
      div:last-child {
        margin-left: 5px;
      }
      span {
        margin-left: 1px;
      }
    }
  }
  .core-items {
    position: relative;
    width: 50%;
    height: 108px;
    padding: 15px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f6f7;
    box-sizing: border-box;
    letter-spacing: 1px;
    color: #888;
    font-size: 12px;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15px;
      bottom: 15px;
      width: 1px;
      background: #f5f6f7;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    &.half_item {
      width: 50%;
    }
    &.no-br {
      &::after {
        display: none;
      }
    }
    .today {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      // line-height: 24px;
      margin-bottom: 10px;
      div {
        display: flex;
        flex-wrap: wrap;
        margin-left: 5px;
      }
      span {
        margin-left: 2px;
        // font-size: 20px;
        font-family: "PFZH";
      }
    }
    .month {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 16px;
      font-size: 10px;
      white-space: nowrap;
      letter-spacing: 0;
      div:last-child {
        margin-left: 5px;
      }
      span {
        margin-left: 1px;
      }
    }
  }
}

.c-title {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  color: #999;
  font-size: 12px;
  font-family: "PFZH";
  white-space: nowrap;
  .icon {
    margin-right: 5px;
    width: 18px;
    height: auto;
  }
}

.core-update-time {
  // border-top:1px solid #F5F6F7;
  padding-top: 10px;
  line-height: 18px;
  text-align: center;
  color: #999999;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
